<template>
  <div id="myVideos">
    <!--视频表格数据-->
    <div class="videos">
      <div class="operations">
        <!--          <Checkbox v-model="isSelectALL" @on-change="selectALL()">全选</Checkbox>-->
        <Button type="text" @click="drop">删除</Button>
        <Button type="text" @click="change">操作</Button>
        <Select v-model="sortType" style="width:100px">
          <Option v-for="item in sortList" :value="item" :key="item">{{ item }}</Option>
        </Select>
      </div>
      <div v-for="v in myVideos" class="video">
        <div v-if="checkboxShow" style="position:relative;top:5px;right:5px;">
          <Checkbox @on-change="selectSingle(v.id)"></Checkbox>
        </div>
        <img src="../../assets/images/register-background.jpeg" width="150px" height="100px"/>
        <div>
          {{v.upTime}}&nbsp;&nbsp;点赞：{{v.videoLike}}
        </div>
      </div>
    </div>
  </div>


</template>

<script>
export default{
  name:'MyVideo',
  data(){
    return{
      idList:[],
      checkboxShow:false,
      file:null,
      sortType:'排序',//排序类型
      sortList:['排序','按时间排序','按播放数排序','按点赞数排序','按收藏数排序','按视频时长排序'],
      videoSelected:[],//存放选中的视频id
      myVideos:[1],
    }
  },
  methods:{
    change(){
      if(this.checkboxShow){
        this.checkboxShow = false
      }else{
        this.checkboxShow = true
      }
    },
    selectSingle(id){
      let selectedList = this.videoSelected
      //判断该数组是否存在index
      if(selectedList.includes(id)){
        //如果存在 获得其下标
        let index = selectedList.indexOf(id)
        //在JavaScript的Array对象中提供了一个splice()方法用于对数组进行特定的操作。splice()恐怕要算最强大的数组方法了，他的用法有很多种，在此只介绍删除数组元素的方法。在删除数组元素的时候，它可以删除任意数量的项，只需要指定2个参数：要删除的第一项的位置和要删除的项数。
        selectedList.splice(index,1)
      }else{
        selectedList.push(id)
      }
      this.videoSelected = selectedList
    },
    drop(){
      let selectedList = this.videoSelected
      if(selectedList.length === 0){
        this.$Message.error('请选择视频')
      }else{
        for(let i=0;i<selectedList.length;i++){
          //发送删除请求
          this.$http.get('/api/deleteVideo',{
            params:{
              id:selectedList[i],
              upId:sessionStorage.getItem('userId')
            }
          }).then(res=>{
            //更新数组
            if(res.data.code === 200){
              this.$Message.success('删除成功')
              let idIndex = this.idList.indexOf(selectedList[i])
              this.idList.splice(idIndex,1)
              this.myVideos.splice(idIndex,1)
            }
          }).catch(error=>{
            this.$Message.error('删除错误，请稍候重试')
          })

        }
      }
    },
  },
  created(){
    this.token = sessionStorage.getItem('token')
    //获取用户所有视频

    this.$http.get('/api/selectVideoByUpId',{
      params:{
        upId:sessionStorage.getItem('userId')
      }
    }).then(res=>{
      console.log("获取用户视频成功")
      this.myVideos = res.data.data.data
      const idList = []
      for(let i=0; i<this.myVideos.length; i++){
        idList.push(this.myVideos[i].id)
      }
      this.idList = idList

    }).catch(error=>{
      this.$Message.error('获取用户视频失败')
    })
  },



}
</script>

<style scoped>
#myVideos{
  width:100%;
  display:flex;
  flex-direction:column;
}

.v_top{
  display:flex;
  flex-direction:row;
  height:40px;
  border-bottom:1px solid red;
  align-items:center;
  padding-left:5px;
}
.operations{
  display:flex;
  flex-direction:row;
  padding-left:70%;
  align-items:center;
}

.videos{
  width:100%;
  padding-left:3%;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
}

.video{
  width:18%;
  margin-top:10px;
  margin-left:5px;

}
</style>
